<!-- 创建角色 -->
<template>
	<view v-if="!loading">
		<add-character v-if="show" :show-back="showBack" @back="show=false" />
		<template v-else>
			<uv-button text="创建角色" @click="add"></uv-button>
			<view class="item uv-flex-row" style="align-items: center;" :class="[{'active':character.activeIndex==index}]" v-for="(item,index) in character.list" :key="index" @click="clickItem(index)">
				<uv-image :src="`/static/images/character/${item.avatar}-small.png`" width="75px" height="75px" mode="aspectFill"></uv-image>
				<span style="color: #fff;">{{item.nickname}}</span>
				<template v-if="item.type == 'STUDENT'">
					<uv-button text="开始学习" @click="startStudy(item)"></uv-button>
					<uv-button text="成绩报告" @click="report(item)"></uv-button>
					<uv-button text="角色群组" @click="group(item)"></uv-button>
				</template>
				<template v-else>
					<uv-button text="管理" @click="manage(item)"></uv-button>
					<uv-button text="角色群组" @click="group(item)"></uv-button>
				</template>
				<uv-button type="error" text="删除" @click="delCharacter(item)" style="margin-left: 30px;"></uv-button>
			</view>
		</template>
	</view>
</template>
<script setup>
	import { defineComponent, reactive, ref } from 'vue';
	import { getUserCharacterList } from '@/common/js/getData.js';
	import addCharacter from './components/add.vue';
	import { setLocalCharacter, delLocalCharacter } from '@/common/js/character.js';
	import { deleteCharacter } from '@/common/api/character.js';
	defineComponent({ addCharacter });
	const show = ref(false);
	const showBack = ref(true);
	const loading = ref(true);
	const character = reactive({
		list: [],
		activeIndex: 0
	})
	// 获取用户角色
	async function init() {
		const characterId = getApp().globalData.dzcharacter?.character?.characterId;
		const res = await getUserCharacterList();
		character.list = res;
		const findIndex = character.list.findIndex(item => item.characterId == characterId);
		character.activeIndex = findIndex > -1 ? findIndex : 0;
		show.value = res.length ? false : true;
		loading.value = false;
	}

	function add() {
		const { maxCharacterCount, member_type } = getApp().globalData.store.userInfo;
		if (member_type == 0 && character.list.length >= maxCharacterCount) {
			uni.showModal({
				title: '解锁角色数量限制',
				content: '升级成会员，可以同时拥有5个不同角色分别保存学习进度，让家庭成员可以一起共享一个账号。',
				success(res) {
					if (res.confirm) {
						console.log('去升级会员')
					}
				}
			})
		} else {
			show.value = true;
			showBack.value = true;
		}
	}

	function clickItem(index) {
		character.activeIndex = index;
	}

	function startStudy(item) {
		setLocalCharacter(item);
		uni.$uv.route({
			url: '/pages/chapter/chapter'
		})
	}
	
	function report(item) {
		setLocalCharacter(item);
		uni.$uv.route({
			url: '/pages/report/report'
		})
	}
	
	function group(item) {
		setLocalCharacter(item);
		uni.$uv.route({
			url: '/pages/group/group'
		})
	}

	function manage(item) {
		setLocalCharacter(item);
		uni.$uv.route({
			url: '/pages/group/group'
		})
	}
	// 删除该角色
	function delCharacter(item) {
		uni.showModal({
			title: '您确定要删除角色吗？',
			content: '删除后您的课程进度将无法恢复',
			confirmText: '仍要删除',
			success(res) {
				if (res.confirm) {
					subDel(item);
				}
			}
		})
	}
	async function subDel(item) {
		uni.showLoading({
			mask: true,
			title: '删除中'
		})
		const res = await deleteCharacter({
			uid: uniCloud.getCurrentUserInfo().uid,
			characterId: item.characterId,
			type: item.type
		})
		init();
		delLocalCharacter();
		uni.hideLoading();
	}
	init();
</script>
<style>
	page {
		min-height: 100%;
		background-color: #242424 !important;
	}
</style>
<style scoped lang="scss">
	.item {
		cursor: pointer;
		&.active {
			border: 1px solid red;
		}
	}
</style>